<script setup lang="ts">
import { ref, computed, watch, type Ref, toRaw } from "vue";
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { message } from "@/utils/message";

/** 导入地图数据 */
import china from "@/assets/map/china.json";
import gd from "@/assets/map/gd.json";

/** 销售数据接口 */

const { isDark } = useDark();

let theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "default";
});

const mapChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  mapChartRef as Ref<HTMLDivElement>,
  { theme }
);

/** 传参 */
const props = defineProps<{
  data: {
    city: object;
    province: object;
  };
}>();

const emit = defineEmits(["change"]);
/** 按钮事件 */
let isBtnShow = ref(false);

/** 地图点击事件 */
let handleClick = {
  name: "click",
  callback: params => {
    if (params.name !== "广东") {
      message(`暂无 ${params.name}地区 数据`, { type: "warning" });
      return;
    }
    message(`切换 ${params.name}地区 数据`, { type: "success" });
    clearHanlder();
    setMap("gd", gd, props.data.city);
    emit("change", "广东");
    isBtnShow.value = true;
  }
};

/** 清除 Echarts Click 事件 */
function clearHanlder() {
  getInstance().off("click");
}

/** 返回上一级 */
function goBack() {
  clearHanlder();
  message("切换 全国数据", { type: "success" });
  setMap("china", china, props.data.province);
  emit("change", "全国");
  isBtnShow.value = false;
}

/**
 * @description: 绘制地图
 * @param {string} mapName 地图名称
 * @param {object} mapJson 地图json数据
 * @param {object} seriesData 系列数据
 */
function setMap(mapName, mapJson, seriesData = "") {
  echarts.registerMap(mapName, mapJson);
  setOptions(
    {
      title: {
        text: "分布区域"
      },
      geo: {
        map: mapName,
        show: true,
        aspectScale: 0.75,
        zoom: 1.2,
        roam: false,
        emphasis: {
          label: {
            show: false
          }
        }
      },
      visualMap: {
        type: "continuous",
        seriesIndex: 0,
        showLabel: true,
        left: "40px",
        bottom: "4%",
        min: 0,
        max: 40, //最大值
        itemWidth: 10, //图形的宽度，即长条的宽度
        itemHeight: 80, //图形的高度，即长条的高度。
        inRange: {
          color: ["#cedbfc", "#adc4fd", "#8dadfe", "#6c95fe", "#4b7eff"]
        },
        outOfRange: {
          color: ["#999999"]
        },
        splitNumber: 0
      },
      tooltip: {
        show: true,
        formatter: function (params) {
          if (params.data)
            return params.name + ":" + params.data["value"] + "单";
        }
      },
      series: [
        {
          type: "map",
          map: mapName,
          aspectScale: 0.75,
          zoom: 1.2,
          lable: {
            color: {
              show: true,
              color: "#000",
              fontWeight: 500
            },
            emphasis: {
              show: true
            }
          },
          emphasis: {
            color: {
              borderColor: "#fff",
              borderWidth: 1
            },
            itemStyle: {
              areaColor: "#867BFF",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          animation: false,
          /** 取消点击变黄 */
          selectedMode: false,
          data: seriesData
        }
      ]
    },
    handleClick
  );
}

/** 监听数据变化更新 Echarts */
watch(
  () => props.data,
  () => {
    setMap("china", china, props.data.province);
  }
);
</script>

<template>
  <div class="relative" style="width: 100%">
    <el-button
      v-show="isBtnShow"
      class="absolute top-0 right-0 z-10"
      type="success"
      @click="goBack"
      >返回上一级</el-button
    >
    <div ref="mapChartRef" style="width: 100%; height: 320px" />
  </div>
</template>
